// 活动时间线
@green: #15C15A;
@orange: #EC850F;
@gray: #A5A5A5;
@rose: #EA267F;
@red: #EC0F0F;
@brow: #E6B650;

.activity-timeLine::v-deep {
  padding-left: 17px;
  padding-right: @activityMarginRight;
  padding-top: 10px;
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;

  .el-timeline-item {
    .el-timeline-item__tail {
      border-left: 1px solid #E4E7ED;
    }

    .el-timeline-item__wrapper {
      padding-left: 16px;
    }

    .el-timeline-item__timestamp.is-top {
      line-height: 18px;
      height: 18px;
      font-size: 13px;
      margin-bottom: 12px;
      padding-top: 0;

      //日期之后的描述符
      &:after {
        content: '';
        margin-left: 6px;
        font-size: 12px;
        width: 38px;
        height: 15px;
        padding: 2px 8px;
        border-radius: 2px;
        line-height: 15px;
      }

      &:before {
        content: '';
        display: block;
      }
    }

    //左侧圆点
    .el-timeline-item__node--normal {
      left: 0;
      width: 9px;
      height: 9px;
    }

    // 三种样式
    &.in_progress {
      .el-timeline-item__node--normal {
        background-color: @green;
      }

      .el-timeline-item__timestamp.is-top {
        &::after {
          content: '进行中';
          border: 1px solid @green;
          color: @green;
        }
      }
    }

    // &.not_start {
    //   .el-timeline-item__node--normal {
    //     background-color: @orange;
    //   }

    //   .el-timeline-item__timestamp.is-top {
    //     &:after {
    //       content: '未开始';
    //       border: 1px solid @orange;
    //       color: @orange;
    //     }
    //   }
    // }

    &.finished {
      .el-timeline-item__node--normal {
        background-color: @gray;
      }

      .el-timeline-item__timestamp.is-top {
        &:after {
          content: '已结束';
          border: 1px solid @gray;
          color: @gray;
        }
      }
    }

    //三种情景
  //   &.Wedding_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '酒吧版';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: @rose;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/weeding_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }

  //   &.Meeting_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '年会版';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: @red;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/meeting_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }

  //   &.Birthday_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '生日版';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: @brow;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/birthday_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }

  //   &.BBY_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '宝宝宴';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: #A564E4;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/birthday_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }

  //   &.SY_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '寿宴';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: #A564E4;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/birthday_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }

  //   &.CRL_plus {
  //     .el-timeline-item__timestamp.is-top {
  //       &::before {
  //         content: '成人礼';
  //         width: 75px;
  //         height: 22px;
  //         text-align: center;
  //         line-height: 22px;
  //         border-radius: 2px;
  //         background-color: #A564E4;
  //         color: #fff;
  //         display: inline-block;
  //         position: absolute;
  //         left: 26%;
  //         background-image: url("../image/icon/birthday_type.png");
  //         background-size: 16px 16px;
  //         background-repeat: no-repeat;
  //         background-position: 1px;
  //         background-position-x: 2px;
  //         padding-left: 15px;
  //         box-sizing: border-box;
  //       }
  //     }
  //   }
  }
}